<template>
  <div class="container">
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="(image, index) in images" :key="index">
            <img v-lazy="image" />
        </van-swipe-item>
    </van-swipe>
  </div>
</template>

<script>
import picture1 from '../../assets/images/yunyun_1.jpeg'
import picture2 from '../../assets/images/yunyun_2.jpeg'
import picture3 from '../../assets/images/yunyun_3.jpeg'
import picture4 from '../../assets/images/yunyun_4.png'
import { Swipe, SwipeItem } from 'vant'
export default {
    name: 'vanswipe',
    components: {
        VanSwipe: Swipe,
        VanSwipeItem: SwipeItem
    },
    data () {
        return {
            images: [
                picture1,
                picture2,
                picture3,
                picture4
            ]
        }
    }
}
</script>

<style lang="less" scoped>
    .my-swipe .van-swipe-item {
        width: 100%;
        height: 200px;
        img {
            width: 100%;
            height: 100%;
        }
    }
</style>